<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui-2.4.2/src/css/layui.css">
    <script type="text/javascript" src="/jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/layui-2.4.2/src/layui.js"></script>
</head>
<body>
<div>
    <div class="layui-row">
        <div class="layui-form">
            <div class="layui-form-item">

                <label class="layui-form-label">商品名称:</label>
                <div class="layui-input-inline">
                    <input type="text" id="productName" name="productName" required
                           lay-verify="required"
                           placeholder="请输入账号id"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">手机号:</label>
                <div class="layui-input-inline">
                    <input type="text" id="user_phone_input" name="user_phone_input" lay-verify="required|phone"
                           placeholder="请输入手机号"
                           autocomplete="off" class="layui-input">
                </div>

                <button class="layui-btn" id="search">搜索</button>
                <button class="layui-btn" id="addSpecProduct">创建</button>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <table id="spec_product_list" lay-filter="user_filter">

        </table>
    </div>

    <form class="layui-form" id="edit_spec_son" action="" style="display:none;margin-top: 30px;">
        <div class="layui-form-item">
            <label class="layui-form-label">选择商品</label>
            <div class="layui-input-block layui-form" style="margin-right:20px;">
                <select name="productId" lay-filter="product" id="product" class="product">
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">父类名称</label>
            <div class="layui-input-block layui-form" style="margin-right:20px;">
                <select name="specParentId" lay-filter="spec_parent" id="spec_parent" class="spec_parent layui-form">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">子类名称</label>
            <div class="layui-input-block layui-form" style="margin-right:20px;">
                <select name="specSonId" lay-filter="spec_son" id="spec_son" class="spec_son">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">父类名称</label>
            <div class="layui-input-block layui-form" style="margin-right:20px;">
                <select name="specParentIdSecond" lay-filter="spec_parent_second" id="spec_parent_second" class="spec_parent_second layui-form">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">子类名称</label>
            <div class="layui-input-block layui-form" style="margin-right:20px;">
                <select name="specSonIdSecond" lay-filter="spec_son_second" id="spec_son_second" class="spec_son_second">
                </select>
            </div>
        </div>

        <label class="layui-form-label">规格价格:</label>
        <div class="layui-input-inline">
            <input type="text" id="product_price" name="productPrice" lay-verify="required"
                   placeholder="请输入规格价格"
                   autocomplete="off" class="layui-input">
        </div>
    </form>
</div>
</body>
<!--表格toobar模板-->
<script type="text/html" id="toolOper">
    <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
</script>
<script>
    layui.use(['element', 'table', 'upload', 'laytpl', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        table.render({
            elem: '#spec_product_list',
            url: '/product/getSpecProductList',
            page: true,
            limit: 10,
            limits: [10, 20, 50, 100],
            cols: [
                [
                    {field: 'id', title: 'id', width: 150},
                    {field: 'productId', title: '商品id', width: 150},
                    {field: 'productName', title: '商品名称', width: 150},
                    {field: 'productPrice', title: '商品价格', width: 200},
                    {field: 'specParentId', title: '规格父类', width: 150},
                    {field: 'specSonId', title: '规格子类', width: 150},
                    {field: 'right', align: 'center', toolbar: '#toolOper'}
                ]
            ],
            response: {
                status: 'errorCode',
                countName: 'total',
                dataName: 'data'
            }
        });
        // $("#search").on('click', function () {
        //     table.reload('user_list_view', {
        //         url: '/userWallet/queryList',
        //         where: {
        //             accountId: $('#user_accountid_input').val(),
        //             mobile: $('#user_phone_input').val(),
        //             type: $('.type_select').val()
        //         }
        //     });
        // });
        $('#addSpecProduct').on('click', function () {
            addSpecProduct();
        });
        var addSpecProduct = function () {
            $.ajax({
                type:'post',
                url:'/product/allProduct',
                cache:false,
                dataType:'json',
                success:function (res) {
                    if(res.success==true){
                        var optionHtml='';
                        $("#product").append('<option value="0">请选择</option>');
                        for(var i=0;i<res.data.length;i++){
                            optionHtml+='<option value="'+res.data[i].id+'">'+res.data[i].productName+'</option>';
                        }
                        $("#product").append(optionHtml);
                        form.render('select');
                    }
                }
            });

            $.ajax({
                type:'post',
                url:'/specProduce/getSpecParentAll',
                cache:false,
                dataType:'json',
                success:function (res) {
                    if(res.success==true){
                        var optionHtml='';
                        $("#spec_parent").append('<option value="0">请选择</option>');
                        for(var i=0;i<res.data.length;i++){
                            optionHtml+='<option value="'+res.data[i].id+'">'+res.data[i].name+'</option>';
                        }
                        $("#spec_parent").append(optionHtml);
                        form.render('select');
                    }
                    if(res.success==true){
                        var optionHtml='';
                        $("#spec_parent_second").append('<option value="0">请选择</option>');
                        for(var i=0;i<res.data.length;i++){
                            optionHtml+='<option value="'+res.data[i].id+'" >'+res.data[i].name+'</option>';
                        }
                        $("#spec_parent_second").append(optionHtml);
                        form.render('select');
                    }
                }
            });

            layer.open({
                type: 1,
                area: ['880px', '600px'],
                content: $("#edit_spec_son"),
                btn: ['保存', '取消'],
                btnALign: 'c',
                yes: function () {
                    if ($("#name").val() == '') {
                        alert('父类名称不允许为空');
                        return;
                    }
                    $.ajax({
                        type: 'post',
                        data: $('#edit_spec_son').serialize(),
                        url: '/specProduce/addSpecProduct',
                        cache: false,
                        dataType: 'json',
                        success: function (data) {
                            layer.closeAll();
                            $(".layui-laypage-btn").click()
                        }
                    });
                },
                end: function () {
                $("#edit_spec_son").find('input[name="name"]').val('');
                $("#edit_spec_son").find('input[name="productPrice"]').val('');
                $("#edit_spec_son").find('input[name="specParentId"]').val('');
                $("#edit_spec_son").find('input[name="specParentIdSecond"]').val('');
                editor.txt.clear();
                layer.closeAll();
            }
            }
            );
        };

        form.on('select(spec_parent)', function (data) {
            var specParentId = $('.spec_parent').val();
            setCityByCountryId(specParentId, $('.spec_son'), 0);
        });

        form.on('select(spec_parent_second)', function (data) {
            var specParentId = $('.spec_parent_second').val();
            setCityByCountryId(specParentId, $('.spec_son_second'), 0);
        });

        function setCityByCountryId(specParentId, citySelect, editInitCity) {
            $.ajax({
                type: 'post',
                url: '/specProduce/getSpecSonByParentId',
                data: {specParentId: specParentId},
                cache: false,
                dataType: 'json',
                success: function (sons) {
                    if (sons.success == true) {
                        var optionHtml = '';
                        if (editInitCity <= 0) {
                            optionHtml = '<option value="0">未选择</option>';
                        }
                        if (sons.data != null && sons.data.length > 0) {
                            for (var i = 0; i < sons.data.length; i++) {
                                optionHtml += '<option value="' + sons.data[i].id + '">' + sons.data[i].name + '</option>';
                            }
                        } else {
                            optionHtml = '<option value="0">未选择</option>';
                        }
                        $(citySelect).html('');
                        $(citySelect).append(optionHtml);
                    }
                    form.render('select');
                    if (editInitCity > 0) {
                        var select = 'dd[lay-value=' + editInitCity + ']';
                        $(citySelect).siblings("div.layui-form-select").find('dl').find(select).click();
                    }
                }
            });
        }



        table.on('tool(user_filter)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            //账号禁用
            if (layEvent === 'delete') {
                if (window.confirm('请确认是否将' + data.productName + data.specParentId +'的信息删除')) {
                    $.ajax({
                        type: 'post',
                        data: {specProductId: data.id},
                        url: '/specProduce/deleteSpecProduct',
                        cache: false,
                        success: function (data) {
                            if (data.success === true) {
                                alert("信息删除成功!");
                            } else {
                                alert(data.mes);
                            }
                        }
                    })
                };

                table.reload('spec_product_list', {
                    url: '/product/getSpecProductList'
                });
            }
        });
    });
</script>
</html>